<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/statics/layui/css/layui.css">
</head>
<body>

<!-- 查询条件 -->
<div class="layui-fluid" >
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
        
        
          <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input type="text" name="account" id="accountId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
        
          <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
              <input type="text" name="mobile" id="mobileId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          
          
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" id="searchBtn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
   </div>
</div>     

<script type="text/html" id="headToolBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">批量删除</a>
</script>

<script type="text/html" id="rowToolBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	
	<table id="tableId" lay-filter="dataTable"></table>
	
	
<script src="${path}/statics/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['laydate', 'laypage','element','jquery','layer','upload',"table"], function(){
  var element = layui.element;
  var $ = layui.jquery;
  var layer = layui.layer;
  var upload = layui.upload;
  var table = layui.table;
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
 
  
  
  //点击查询按钮的处理事件
  $("#searchBtn").click(function(){
	 // alert();
	 
	 //重新加载表格,额外传递参数
	table.reload('tableId', {
 	    where: { //设定异步数据接口的额外参数，任意设
    	 account: $("#accountId").val()
    	,mobile: $("#mobileId").val()
    	//…
  	}
  	,page: {
  	   curr: 1 //重新从第 1 页开始
    }
	}); //只重载数据
	  
  });
  

  var active= {
  		  //重新加载表格数据,还是异步请求
  		  reloadTable:function(){
  			  table.reload('tableId', {
  				  page: {
  				    curr: 1 //重新从第 1 页开始
  				  }
  				}); //只重载数据
  		  }
  }

  window.tools = active;
  
  //第一个实例
  table.render({
    elem: '#tableId'
    ,url: '${path}/userCtl/userList' //数据接口
    ,page: true //开启分页
    ,toolbar: '#headToolBar'
    ,page:true
    ,limit: 5
    ,limits:[5,10,20,30,40,50,60]
    ,initSort:{
    	field: 'id' //排序字段
    	,type: 'desc'
    }
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID' ,sort:true,width:60}
      ,{field: 'account', title: '账号' ,sort:true,width :120}
      ,{field: 'sex', title: '性别' ,align:'center',unresize:true}
      
      ,{field: 'mobile', title: '电话' ,align:'center'}
      ,{field: 'address', title: '地址',sort:true,width :150,align:'center'}
      ,{field: 'oper_user', title: '操作员',align:'center'}
      ,{field: 'oper_time', title: '操作时间',align:'center',sort:true,templet:function(row){
    	  //row表示当前行数据
    	  var date = new Date(row.oper_time);
    	  return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
      }}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#rowToolBar'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(dataTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
    	  var indexAdd = layer.open({
    		   type: 2
    		  ,content: '${path}/userCtl/addUser'
    		  ,title: "编辑用户"
    		  ,skin: "layui-layer-molv"
    		  ,area: ['500px', '600px']
    		  //,area: 
    		  //,closeBtn: 1
    		  ,btnAlign: 'r'
    		  ,anim: 1
    	  });
       // layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请至少选择一行');
        } else {
        	
        	//获取选中的行数的id值
        	var ids = "";
        	for(var i=0;i<data.length;i++){
        		alert(data[i].id)
        		ids += data[i].id+","
        	}
        	 layer.confirm('真的要批量删除么?', function(index){
         	    
     	        //obj.del(); //删除对应行（tr）的DOM结构
     	        layer.close(index);
     	        
     	        //向服务端发送删除指令
     	        $.post("${path}/userCtl/deleteUser",{ids:ids},function(res){
     	        	
     	        	//返回状态码
     	        	if(res == 0){
     	        		layer.msg("删除成功",{icon:1},function(){
     	        			//因为在父级页面,所以不用parent.tools.function()
     	        			active.reloadTable();	
     	        		})
     	        	}else{
     	        		layer.msg("删除失败",{icon:5});
     	        	}
     	        	
     	        })
     	        
           });
        }
      break;
    };
  });
  
  
  //监听行工具事件
  table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var rowData = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
    	    
	        //obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	         //向服务端发送删除指令
     	        $.post("${path}/userCtl/deleteUser",{ids:rowData.id},function(res){
     	        	
     	        	//返回状态码
     	        	if(res == 0){
     	        		layer.msg("删除成功",{icon:1},function(){
     	        			
     	        			//因为在父级页面,所以不用parent.tools.function()
     	        			active.reloadTable();	
     	        		})
     	        	}else{
     	        		layer.msg("删除失败",{icon:5});
     	        	}
     	        	
     	        });
	        
      });
    } else if(layEvent === 'edit'){
      	//layer.msg('编辑操作');
    	layer.open({
 		   type: 2
 		  ,content: '${path}/userCtl/toUpdate?id='+rowData.id
 		  ,title: "编辑用户"
 		  ,skin: "layui-layer-molv"
 		  ,area: ['500px', '600px']
 		  //,area: 
 		  //,closeBtn: 1
 		  ,btnAlign: 'r'
 		  ,anim: 1
 	  });
    }
  });
});


</script>



</body>
</html>